<template>
  <!-- 驾驶舱主体 -->
  <div class="dirverhousebody">
    <!-- 左边开始 -->
    <div class="bodyleftbox common">
      <XgyBgBoxRound>
        <template v-slot:content>
          <div class="librarybox">
            <div class="tushuguanrenliuliang">
              <XgyBgBoxInfo>
                <template v-slot:infotitleicon>
                  <div class="icon"></div>
                </template>
                <template v-slot:infotitletext>图书馆人流量（周）</template>
                <template v-slot:infobody>
                  <div class="tushuguanre">
                    <DriverHousetraffic></DriverHousetraffic>
                  </div>

                </template>
              </XgyBgBoxInfo>
            </div>
            <div class="tushuguanrenshuduibi">
              <XgyBgBoxInfo :ismore="true">
                <template v-slot:infotitleicon>
                  <div class="icon"></div>
                </template>
                <template v-slot:infotitletext>图书馆人数对比</template>
                <template v-slot:infobody>

                  <div class="tushuguanrensh">
                    <DriverHouselicompar></DriverHouselicompar>
                  </div>
                </template>
              </XgyBgBoxInfo>
            </div>

          </div>

        </template>
      </XgyBgBoxRound>
    </div>
    <!-- 左边结束 -->
    <!-- 中间开始 -->
    <div class="bodycenterbox common">
      /* 中上 */
      <div class="centerboxtop">
        <XgyBgBoxRound>
          <template v-slot:content>
            <XgyBgBoxInfo>
              <template v-slot:infotitleicon>
                <div class="icon"></div>
              </template>
              <template v-slot:infotitletext>不在校人流量对比</template>
              <template v-slot:infobody>
                <div class="buzairenflexbox">
                  <div class="buzaixiaorenliuliangcircletu">
                    <XgyBgBoxCircle>
                      <template v-slot:circlecontent>
                        {{absentProportion*100+'%'}}
                      </template>
                    </XgyBgBoxCircle>
                  </div>
                  <div class="zaixiaorenliuliangtongji">
                    <div class="shagncengtupian"></div>
                    <XgyBgBoxXuehua>
                      <template v-slot:contentbody>
                        <div class="renliuliangbox">
                          <div class="renliuliangtitle">
                            在线人流量统计
                          </div>
                          <div class="renliuliangcontent">

                            <div class="reliuliangcountbox">
                              <XgyBgBoxRectBig v-for="(item,index) in schoolPopulation"
                                               :key="index"> <template v-slot:rectcontent>{{item}}</template></XgyBgBoxRectBig>

                            </div>
                          </div>
                        </div>
                      </template>
                    </XgyBgBoxXuehua>
                  </div>
                </div>
                <div class="housemoudebox">

                  <div class="housemodel">
                    <img src="../../assets/driverhouseimg/housemodel.png">
                  </div>
                </div>
              </template>
            </XgyBgBoxInfo>
          </template>

        </XgyBgBoxRound>
      </div>
      /* 中下 */
      <div class="centerboxdown">
        <XgyBgBoxRound>
          <template v-slot:content>
            <div class="xiaowaibox">
              <div class="xiaowaizhusu">
                <XgyBgBoxInfo>
                  <template v-slot:infotitleicon>
                    <div class="icon"></div>
                  </template>
                  <template v-slot:infotitletext>校外住宿</template>
                  <template v-slot:infobody>
                    <div class="xiaowaizhusuinfo">
                      <XgyBgBoxXuehua>
                        <template v-slot:contentbody>
                          <div class="rendate rencommon">
                            <XgyBgBoxDetail>
                              <template v-slot:contenttitle>
                                日期
                              </template>
                              <template v-slot:contentbody>
                                <div class="datebox">
                                  {{"202108.12"}}</div>
                              </template>
                            </XgyBgBoxDetail>
                          </div>
                          <div class="rencount rencommon">
                            <XgyBgBoxDetail>
                              <template v-slot:contenttitle>请假人数</template>
                              <template v-slot:contentbody>
                                <div class="rencountboxs">
                                  <XgyBgBoxRect v-for="(item,index) in outStayAsk"
                                                :key="index">
                                    <template v-slot:rectcontent>
                                      {{item}}
                                    </template>
                                  </XgyBgBoxRect>

                                </div>
                              </template>
                            </XgyBgBoxDetail>
                          </div>
                          <div class="rennoqingjia rencommon">
                            <XgyBgBoxDetail>
                              <template v-slot:contenttitle>
                                未请假数</template>
                              <template v-slot:contentbody>
                                <div class="rennoqingjiabox">
                                  <XgyBgBoxRect v-for="(item,index) in outStayNoAsk"
                                                :key="index">
                                    <template v-slot:rectcontent>
                                      {{item}}
                                    </template>
                                  </XgyBgBoxRect>

                                </div>
                              </template>
                            </XgyBgBoxDetail>
                          </div>
                        </template>

                      </XgyBgBoxXuehua>
                    </div>

                  </template>
                </XgyBgBoxInfo>
              </div>
              <div class="xiaowaizhusuduibi">
                <XgyBgBoxInfo :ismore="true">
                  <template v-slot:infotitletext>校外住宿对比</template>
                  <template v-slot:infobody>

                    <div class="xiaowaizhusudui">
                      <DriverHousenebar></DriverHousenebar>
                    </div>

                  </template>
                </XgyBgBoxInfo>
              </div>
            </div>

          </template>
        </XgyBgBoxRound>
      </div>
    </div>
    <!-- 中间结束 -->
    <!-- 右边开始 -->
    <div class="bodyrightbox common">
      <XgyBgBoxRound>

        <template v-slot:content>
          <div class="renliuliangbox">
            <div class="renliuliangduibitop">
              <XgyBgBoxInfo>
                <template v-slot:infotitleicon>
                  <div class="icon"></div>
                </template>
                <template v-slot:infotitletext>上网人流量对比</template>
                <template v-slot:infobody>
                  <div class="shangwangbox">
                    <div class="yizhoupingjun">
                      <DriverHouseonline></DriverHouseonline>
                    </div>
                    <div class="shenyeshangwangren">
                      <DriverHouseinternet></DriverHouseinternet>
                    </div>
                  </div>
                </template>
              </XgyBgBoxInfo>

            </div>
            <div class="renliuliangduibidown">
              <XgyBgBoxInfo>
                <template v-slot:infotitleicon>
                  <div class="icon"></div>
                </template>
                <template v-slot:infotitletext>上网人流量对比</template>
                <template v-slot:infobody>

                  <div class="renliuliang">
                    <DriverHousebar></DriverHousebar>
                  </div>
                </template>
              </XgyBgBoxInfo>
            </div>
          </div>

        </template>

      </XgyBgBoxRound>
    </div>
    <!-- 右边结束 -->

  </div>
</template>

<script>

//BgBox
import XgyBgBoxRound from '@/components/driverhouse/XgyBgBoxRound'
import XgyBgBoxInfo from '@/components/driverhouse/XgyBgBoxInfo'
import XgyBgBoxXuehua from '@/components/driverhouse/XgyBgBoxXuehua'
import XgyBgBoxDetail from '@/components/driverhouse/XgyBgBoxDetail'
import XgyBgBoxRect from '@/components/driverhouse/XgyBgBoxRect'
import XgyBgBoxRectBig from '@/components/driverhouse/XgyBgBoxRectBig'
import XgyBgBoxCircle from '@/components/driverhouse/XgyBgBoxCircle'


// charts 
import DriverHouseinternet from '@/components/charts/DriverHouseinternet'
import DriverHouselicompar from '@/components/charts/DriverHouselicompar'
import DriverHousenebar from '@/components/charts/DriverHousenebar'
import DriverHouseonline from '@/components/charts/DriverHouseonline'
import DriverHousetraffic from '@/components/charts/DriverHousetraffic'
import DriverHousebar from '@/components/charts/DriverHousebar'
export default {
  name: "DriverHouseBody",
  components: {
    XgyBgBoxRound,
    XgyBgBoxInfo,
    XgyBgBoxXuehua,
    XgyBgBoxDetail,
    XgyBgBoxRect,
    XgyBgBoxRectBig,
    XgyBgBoxCircle,  //charts
    DriverHouseinternet, DriverHouselicompar, DriverHousenebar, DriverHouseonline, DriverHousetraffic,
    DriverHousebar
  },
  data () {
    return {
      // 缺席比例
      absentProportion: '',
      // 学校比例
      schoolPopulation: [],
      // 周末在校外
      outStayNoAsk: [],
      // 未请假出校
      outStayAsk: [],
      // 选定的日期
      dateTime: '',
      // 是否就绪
      isReady: false
    }
  },
  created () {
    this.getData()
  },
  mounted () {
    this.isReady = true
  },
  methods: {
    getData () {
      this.absentProportion = this.dashboardData.absentProportion
      this.schoolPopulation = this.translateNumtoArray(this.fullNum(this.dashboardData.schoolPopulation + '', 4))
      this.outStayNoAsk = this.translateNumtoArray(this.fullNum(this.dashboardData.outStayNoAsk + '', 4))
      this.outStayAsk = this.translateNumtoArray(this.fullNum(this.dashboardData.outStayAsk + '', 4))
      this.dataTime = this.translateSeparateSign(this.dashboardData.date + '', "-", ".")
    },
    /**
     * @description: 将数字字符串  转换 为  数字数组
     * @param {*} num
     * @return {*}
     */
    translateNumtoArray (num) {
      let numArr = []
      for (let i = 0; i < num.length; i++) {
        numArr.push(num[i])
      }
      return numArr
    },
    // 修改字符串中的分隔符
    translateSeparateSign (str, sep1, sep2) {
      return str.split(sep1).join(sep2)
    },
    // 数字字符串长度不够，补全字符串宽度
    fullNum (numStr, length) {
      let tempLength = length - numStr.length
      if (tempLength < length) {

        for (let i = 0; i < tempLength; i++) {
          numStr = '0' + numStr
        }
      }

      return numStr;
    }
  },
  computed: {
    // 实时更新数据
    dashboardData () {
      return this.$store.state.dashBoardData
    }
  },
  watch: {
    // 实时更新数据
    dashboardData: {
      immediate: true,
      handler: function () {
        if (this.isReady) {
          this.getData();
        }

      }
    }
  }

}
</script>

<style lang="less" scoped>
.common {
  height: 100%;
}
.dirverhousebody {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .bodyleftbox {
    width: 19.2rem;
    flex: 1 1 19.2rem;
    padding-right: 0.65rem;
    .librarybox {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .tushuguanrenliuliang {
        height: 21.25rem;
        margin-left: -1rem;

        .icon {
          background-image: url("../../assets/driverhouseimg/bookstorebg.png");
          width: 1.4rem;
          height: 1.4rem;
        }
        .tushuguanre {
          height: 18.75rem;
          width: 17.3rem;
        }
      }
      .tushuguanrenshuduibi {
        height: 26.65rem;
        .icon {
          background-image: url("../../assets/driverhouseimg/peoplebg.png");
          width: 1.4rem;
          height: 1.5rem;
        }
        .tushuguanrensh {
          width: 16.7rem;
          height: 25rem;
        }
      }
    }
  }
  .bodycenterbox {
    width: 52rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .centerboxtop {
      height: 29.8rem;
      margin-bottom: 1.65rem;
      display: flex;
      justify-content: space-between;
      .icon {
        width: 1.4rem;
        height: 1.4rem;
        background-image: url("../../assets/driverhouseimg/learncount.png");
        background-repeat: no-repeat;
        background-size: contain;
      }
      .buzairenflexbox {
        display: flex;
        justify-content: space-between;
        .buzaixiaorenliuliangcircletu {
        }
        .zaixiaorenliuliangtongji {
          width: 23.15rem;
          height: 10.85rem;
          position: relative;
          .shagncengtupian {
            position: absolute;
            left: 0rem;
            top: 0rem;
            height: 100%;
            width: 100%;
            background-image: url("../../assets/driverhouseimg/bgboxbaibian.png");
            z-index: 10;
            background-size: 150%;
            background-position: -2.65rem -52px;
            background-repeat: no-repeat;
          }
          .renliuliangbox {
            .renliuliangtitle {
              font-size: 0.9rem;
              color: white;
            }
            .renliuliangcontent {
              .reliuliangcountbox {
                display: flex;
                justify-content: space-between;
                width: 20.5rem;
                .xgybgboxrectbig {
                  width: 3.2rem;
                  height: 6.25rem;
                  font-size: 3rem;
                  color: white;
                }
              }
            }
          }
        }
      }
      .housemoudebox {
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: center;
        .housemodel {
          width: 42.8rem;
          img {
            height: 12rem;
          }
        }
      }
    }
    .centerboxdown {
      height: 17.65rem;
      .xiaowaibox {
        display: flex;
        justify-content: space-between;
        .xiaowaizhusu {
          .icon {
            width: 1.4rem;
            height: 1.5rem;
            background-image: url("../../assets/driverhouseimg/peoplebg.png");
          }
          .xiaowaizhusuinfo {
            width: 17.15rem;
            margin-top: 1.75rem;
            height: 7.15rem;
            .rencommon {
              width: 4.3rem;
              height: 4.6rem;
            }
            .rendate {
              margin-right: 1.15rem;
              .datebox {
                width: 2.25rem;
                word-wrap: break-word;
              }
            }
            .rencount {
              margin-right: 1.15rem;
              .rencountboxs {
                width: 3.5rem;
                display: flex;
                justify-content: space-between;
                .xgybgboxrect {
                  width: 0.8rem;
                  height: 1.6rem;
                }
              }
            }
          }
          .rennoqingjiabox {
            width: 3.5rem;
            display: flex;
            justify-content: space-between;
            .xgybgboxrect {
              width: 0.8rem;
              height: 1.6rem;
            }
          }
        }
        .xiaowaizhusuduibi {
          width: 31.75rem;
          .xiaowaizhusudui {
            width: 31.95rem;
            height: 10.5rem;
          }
        }
      }
    }
  }
  .bodyrightbox {
    padding-left: 0.65rem;
    width: 21rem;
    .renliuliangbox {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .renliuliangduibitop {
        height: 14.7rem;
        .icon {
          width: 1.6rem;
          height: 1.6rem;
          background-image: url("../../assets/driverhouseimg/webbg.png");
        }
        .shangwangbox {
          display: flex;
          justify-content: space-between;
          .shenyeshangwangren {
            width: 8.2rem;
            height: 11.6rem;
          }
          .yizhoupingjun {
            width: 11.3rem;
            height: 11.3rem;
          }
        }
      }
      .renliuliangduibidown {
        height: 30.6rem;
        .icon {
          width: 1.75rem;
          height: 1.75rem;
          background-image: url("../../assets/driverhouseimg/webbg.png");
        }
        .renliuliang {
          margin-left: -1rem;
          width: 19.5rem;
          height: 25.5rem !important;
        }
      }
    }
  }
}
</style>